<template>
  <div class="searchRecommendItem" v-if="videoinfo">
    <div class="top">
      <div class="left">
        <div class="avatar" @click.stop="toUser">
          <van-image
            round
            width="50px"
            height="50px"
            lazy-load
            :src="videoinfo.avatar"
          />
        </div>
        <div class="author">
          <div class="username">{{ videoinfo.username }}</div>
          <div class="sub">
            {{
              videoinfo.occupation ? `${videoinfo.occupation}&nbsp;·&nbsp;` : ""
            }}
            {{
              videoinfo.location
                ? `${
                    videoinfo.location.province
                      ? videoinfo.location.province.name
                      : videoinfo.location.country.name
                  }&nbsp;·&nbsp;`
                : ""
            }}
            {{
              videoinfo.count.count_follower
                ? `粉丝&nbsp;${videoinfo.count.count_follower}`
                : ""
            }}
          </div>
        </div>
      </div>
      <div v-if="isFollow" class="unfollow" @click.stop="unfollow">已关注</div>
      <div v-else class="follow" @click.stop="follow">关注</div>
    </div>
    <div class="articles">
      <div
        class="article"
        v-for="article in videoinfo.articles"
        :key="article.id"
        @click.stop="toArticle(article.id)"
      >
        <van-image
          width="110"
          height="61.8px"
          lazy-load
          radius="8px"
          :src="article.cover"
        />
        <div class="time">{{ article.duration | time }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["videoinfo"],
  data() {
    return {
      isFollow: false,
    };
  },
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
  },
  methods: {
    unfollow() {
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != this.videoinfo.id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    follow() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(this.videoinfo.id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    toUser() {
      this.$router.push({
        path: "/user",
        query: { userid: this.videoinfo.id },
      });
    },
    toArticle(id) {
      // console.log("toArticle", this.videoInfo.id);
      this.$router.push({ path: "article", query: { id } });
      //   window.location.reload();
    },
  },
  mounted() {
    if (localStorage.getItem("nsMine")) {
      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (follows.indexOf(this.videoinfo.id) != -1) {
        this.isFollow = true;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.searchRecommendItem {
  padding: 18px 0 10px;
  border-bottom: 1px solid #f2f2f2;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 51px;
        height: 51px;
        border-radius: 50%;
        border: 1px solid #f2f2f2;
        margin-right: 5px;
      }

      .author {
        display: flex;
        flex-direction: column;

        .username {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 3px;
        }

        .sub {
          font-size: 13px;
          color: #999;
          height: 18px;
          line-height: 18px;
        }
      }
    }

    .follow {
      width: 64px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      font-size: 15px;
      background-color: #fdefe9;
      color: red;
    }

    .unfollow {
      width: 64px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      font-size: 14px;
      background-color: #f7f7f7;
      color: #999;
    }
  }

  .articles {
    display: flex;
    justify-content: space-between;

    .article {
      position: relative;

      :deep(.van-image) {
        display: block !important;
      }

      .time {
        position: absolute;
        right: 5px;
        bottom: 4px;
        font-size: 12px;
        color: white;
        text-shadow: 1px 1px #000;
      }
    }
  }
}
</style>
